<script setup lang="ts">
import { ref,onMounted } from 'vue';
import OrderListItem from '@/components/OrderListItem.vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const active= ref()
import {useOrderStore} from '@/stores/order'
const orderStore = useOrderStore()







// orderStore.deleteOrder()


const shopOrderList = ref<any>([])

const getShopOrderList=()=>{

if(active.value==0) return shopOrderList.value=orderStore.orderList
if(active.value==1) return shopOrderList.value=orderStore.orderList.filter((item: { status: number; })=>item.status==1)
if(active.value==2) return shopOrderList.value=orderStore.orderList.filter((item: { status: number; })=>item.status==2)
if(active.value==3) return shopOrderList.value=orderStore.orderList.filter((item: { status: number; })=>item.status==3)
if(active.value==4) return shopOrderList.value=orderStore.orderList.filter((item: { status: number; })=>item.status==4)


}

onMounted(() => {
  shopOrderList.value = orderStore.orderList
})


</script>
<template>
  <div class="order">
    <van-nav-bar title="我的订单" left-arrow @click-left="router.go(-1)" />
    <van-tabs v-model:active="active" @click-tab="getShopOrderList">
      <van-tab name="0" title="全部"></van-tab>
      <van-tab name="1" title="待支付"></van-tab>
      <van-tab name="2" title="待发货"></van-tab>
      <van-tab name="3" title="待收货"></van-tab>
      <van-tab name="4" title="待评价"></van-tab>
    </van-tabs>

    <OrderListItem v-for="item in shopOrderList" :key="item?.id" :good="item" :active="Number(active)" ></OrderListItem>
  </div>
</template>
<style lang="less" scoped>
.order {
  background-color: #fafafa;
}
.van-tabs {
  position: sticky;
  top: 0;
}
</style>